<template>
  <div class="poster">
    <header>
      <h1>员工紧急心理危机响应流程</h1>
      <div class="subtitle">自杀未遂情境处理指南</div>
    </header>

    <div class="principles">
      <div class="principle">生命至上</div>
      <div class="principle">专业支持</div>
      <div class="principle">严守保密</div>
    </div>

    <div class="content">
      <div class="section">
        <h2 class="section-title">1. 确保安全 &amp; 紧急救助</h2>
        <ul class="step-list">
          <li>
            <span class="highlight">移除危险物：</span>
            清除现场可见危险物品（药、利器）
          </li>
          <li>
            <span class="highlight warning">紧急医疗：</span>
            服药/失血/意识不清？<br /><span class="highlight"
              >立即拨打120！</span
            >
          </li>
          <li>提供基础急救（如止血）</li>
          <li>疏散无关人员，保护隐私</li>
        </ul>
        <div class="dialogue">
          "你安全吗？哪里受伤？"<br />
          "120已在路上。"<br />
          "我先帮你止血。"
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">2. 稳定情绪 &amp; 初步沟通</h2>
        <ul class="step-list">
          <li>保持自身冷静，态度平和</li>
          <li>表达关怀，使用共情语言</li>
          <li>专注当下，避免争论或追问细节</li>
        </ul>
        <div class="dialogue">
          "你现在一定很难受。"<br />
          "谢谢你的信任。"<br />
          "我会陪着你。"
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">3. 初步风险评估</h2>
        <ul class="step-list">
          <li><span class="highlight">关键询问（如员工状态允许）：</span></li>
          <li>行为细节？（如"吃了什么药？" - 供医疗参考）</li>
          <li>当前是否有自杀念头/计划？</li>
          <li>是否愿意接受帮助？</li>
          <li>
            <span class="highlight">目的：</span>
            判断后续措施紧急性（非专业诊断）
          </li>
        </ul>
      </div>

      <div class="section">
        <h2 class="section-title">4. 联系紧急联系人</h2>
        <ul class="step-list">
          <li><span class="highlight">首选：</span> 征询员工意见</li>
          <li>
            <span class="highlight warning">紧急情况：</span>
            意识不清/高危/拒绝但风险极高时立即联系
          </li>
          <li>
            告知"员工突发健康问题需送医"<br /><span class="highlight"
              >避免详述行为</span
            >
          </li>
          <li><span class="highlight">严守保密：</span> 信息仅限必要人员</li>
        </ul>
        <div class="dialogue">
          "需要联系家人确保你得到照顾，<br />你希望我们怎么说或由谁联系？"
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">5. 制定短期安全计划</h2>
        <ul class="step-list">
          <li>与员工/家属明确24-48小时安排：</li>
          <li>就医/交通安排</li>
          <li>确保离开后处于安全环境（家属陪伴）</li>
          <li>确定公司主要联系人（通常是HR）</li>
          <li>
            <span class="highlight warning">重要：</span>
            复工前必须获得专业医疗评估许可
          </li>
        </ul>
      </div>

      <div class="section">
        <h2 class="section-title">6. 后续关怀与支持</h2>
        <ul class="step-list">
          <li>
            <span class="highlight">HR跟进：</span> 24-48小时内首次关心健康状况
          </li>
          <li>介绍支持资源（如EAP心理咨询）</li>
          <li>根据意愿安排专业心理援助</li>
          <li>定期非侵入性联系（频率依情况定）</li>
          <li><span class="highlight">复工流程：</span></li>
          <li>必需专业医疗机构出具的复工评估</li>
          <li>HR与主管制定个性化支持复工计划</li>
        </ul>
        <div class="dialogue">
          "公司有心理咨询师，需要帮你预约吗？"<br />
          "明后天方便电话关心下你吗？"<br />
          "复工时请提前沟通，我们会根据医生建议支持你。"
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">HR/管理者注意事项</h2>
        <ul class="note-list">
          <li>
            <span class="icon">⚠️</span
            ><span class="highlight warning">生命第一：</span>
            任何迟疑前，先判断是否需急救！果断打120！
          </li>
          <li>
            <span class="icon">⚠️</span
            ><span class="highlight">清除危险源：</span> 现场安全是基础
          </li>
          <li>
            <span class="icon">⚠️</span
            ><span class="highlight">专业冷静：</span>
            稳定自身，专注员工安全与感受
          </li>
          <li>
            <span class="icon">🔒</span
            ><span class="highlight">绝对保密：</span>
            仅在必须知情范围内沟通，严禁公开讨论
          </li>
          <li>
            <span class="icon">⚖️</span
            ><span class="highlight">权责清晰：</span>
          </li>
          <li>客观记录事件关键信息与行动</li>
          <li>仅提供公司政策支持（病假、EAP）</li>
          <li>避免越权承诺（如治疗费、职位保证）</li>
          <li>
            <span class="icon">💆</span
            ><span class="highlight">自我关怀：</span>
            事件后强烈建议寻求专业心理督导/咨询
          </li>
        </ul>
      </div>
    </div>

    <footer>
      <p>企业心理健康支持计划 | 人力资源部制定 | 保密文件请妥善保管</p>
      <p>遇到紧急情况请立即拨打120或联系专业心理危机干预热线</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: "PsychologicalCrisisProcess",
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

.poster {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 100, 0.15);
  overflow: hidden;
}

header {
  background: linear-gradient(135deg, #1a6dcc, #0d4a9e);
  color: white;
  padding: 30px 40px;
  text-align: center;
}

h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  font-weight: 300;
  max-width: 800px;
  margin: 0 auto;
}

.principles {
  background: #e8f4ff;
  padding: 25px 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
  border-bottom: 1px solid #d0e5ff;
}

.principle {
  text-align: center;
  font-weight: 600;
  font-size: 1.2rem;
  color: #0d4a9e;
}

.principle::before {
  content: "•";
  font-size: 2rem;
  margin-right: 8px;
  vertical-align: middle;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  padding: 35px 40px;
}

.section {
  background: #f9fbff;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 3px 10px rgba(0, 0, 100, 0.05);
  border: 1px solid #e1ebfa;
  transition: transform 0.3s ease;
}

.section:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 100, 0.1);
}

.section-title {
  color: #0d4a9e;
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #d0e5ff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #1a6dcc;
  border-radius: 50%;
}

.step-list,
.note-list {
  list-style-type: none;
}

.step-list li,
.note-list li {
  margin-bottom: 16px;
  padding-left: 28px;
  position: relative;
  line-height: 1.5;
}

.step-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #1a6dcc;
  font-weight: bold;
}

.note-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #1a6dcc;
  font-size: 1.4rem;
  top: -2px;
}

.highlight {
  background: #fff9e6;
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: #d35400;
}

.warning {
  color: #e74c3c;
  font-weight: 600;
}

.dialogue {
  background: #edf7ff;
  border-left: 4px solid #1a6dcc;
  padding: 18px;
  margin-top: 15px;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #1a569e;
}

.icon {
  display: inline-block;
  font-size: 1.3rem;
  margin-right: 8px;
  vertical-align: middle;
}

footer {
  text-align: center;
  padding: 25px 40px;
  background: #f0f7ff;
  color: #5a7baa;
  font-size: 0.9rem;
  border-top: 1px solid #e1ebfa;
}

@media (max-width: 768px) {
  .content {
    grid-template-columns: 1fr;
    padding: 25px 20px;
  }

  header {
    padding: 25px 20px;
  }

  h1 {
    font-size: 2.2rem;
  }

  .principles {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }
}
</style>
